<template>
  <div>
    <div class="apply_step" style="display:none;">
      <div class="apply_step1">
        <img src="@/assets/imgs/apply_step1.png">
      </div>
      <div class="apply_arrow">
        <img src="@/assets/imgs/apply_arrow.png">
      </div>
      <div class="apply_step2">
        <img src="@/assets/imgs/apply_step2.png">
      </div>
      <div class="apply_arrow">
        <img src="@/assets/imgs/apply_arrow.png">
      </div>
      <div class="apply_step3">
        <img src="@/assets/imgs/apply_step3.png">
      </div>
    </div>
    <div class="userinfo">
      <ul>
        <li class="pho">
          <input v-model="phone" type="text" placeholder="请输入手机号码">
        <input id="u" type="hidden" name="u"></li>
        <li class="agree tohide">
          <img src="@/assets/imgs/pay_checkbox_normal.png" data-status="0">
          同意<span>《蚂蚁借服务协议》</span>
        </li>
        <li class="apply_btn" @click="submit"/>
      </ul>
    </div>
    <split-title title="他们的声音" />
    <swiper />
  </div>
</template>
<script>
import Swiper from '../components/Swiper'
import SplitTitle from '../components/SplitTitle'
const reg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[89])[0-9]{8}$/
export default {
  name: 'Home',
  components: {
    Swiper,
    SplitTitle
  },
  data() {
    return {
      phone: ''
    }
  },
  methods: {
    submit() {
      const phone = this.phone
      if (!phone) {
        this.$toast('请填写手机号码')
        return
      }
      if (!reg.test(phone)) {
        this.$toast('请填写正确的手机号码')
        return
      }
      this.$router.push('/info')
    }
  }
}
</script>
<style lang="less" scoped>
    .apply_step{
        width: 74.93%;
        position: relative;
        margin:0 auto 47px auto;
        padding-top: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .apply_step>div{
        position: relative;
    }
    .apply_step>div:nth-child(odd){
        width: 8.185%;
        height: 7.829%;
    }
    .apply_step>div:nth-child(even){
        width: 24.02%;
        height: auto;
        margin:0 6.405%;
    }
    .apply_step>div img{
        width: 100%;
        height: 100%;
    }
    .apply_step1:after,.apply_step2:after,.apply_step3:after{
        position: absolute;
        width: 100px;
        top: 24px;
        left: -14px;
        font-size: 14px;
        color: #333333;
    }
    .apply_step1:after{
        content: '注册申请';
    }
    .apply_step2:after{
        content: '专属服务';
    }
    .apply_step3:after{
        content: '资金到账';
    }
    .userinfo{
        position: relative;
        width: 92%;
        margin:0 auto;
        padding-bottom: 15px;
    }
    .hasuser{
        width: 100%;
        font-size: 14px;
        color: #333333;
        text-align:center;;
    }
    .hasuser>div{
        width: 100%;
        height: 74px;
        background-image: url(../../../assets/imgs/common_btn.png);
        background-size: 100% 100%;
        color: #ffffff;
        font-size: 18px;
        font-weight: bold;
        line-height:74px;
    }
    .tohide{
        display: none;
    }
    .userinfo li{
        overflow: hidden;
    }
    .userinfo li:not(:last-child){
        width: 100%;
        height: 43px;
        border: 1px solid #fe7327;
        border-radius: 22.5px;
        margin-bottom: 15px;
    }
    .userinfo li:nth-last-child(2){
        width: 100%;
        position: relative;
        margin-top: 20px;
        font-size: 14px;
        color: #333333;
        height: auto;
        border: none;
        margin-bottom: unset;
        border-radius: unset;
    }
    .userinfo li:nth-last-child(2) img{
        width: 12px;
        height: 12px;
        padding-right: 10px
    }
    .userinfo li:nth-last-child(2) span {
        color: #0aa7f8;
    }
    .userinfo li:last-child{
        width: 100%;
        height:61px;
        margin-top: 10px;
        font-size: 0;
        background-image: url(../../../assets/imgs/home_btn.png);
        background-size: 100% 100%;
    }
    .userinfo li input{
        padding-left: 20px;
        font-size: 14px;
    }
    .userinfo li:first-child input{
        width: 100%;
    }
    .userinfo input{
        padding-left: 20px;
        font-size: 14px;
        height: 100%;
        border: none;
        outline: none;
    }
</style>
